<template>
<div>
<!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="width: 1200px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
        <el-row>
          <el-col :span="8">
                <el-input placeholder="请输入内容"  v-model="datalist.keyword" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="getuser()"></el-button>
                </el-input>
          </el-col>
          <el-col :span="4">
                <el-button type="primary" class="btn">主要按钮</el-button>
          </el-col>
        </el-row>
        <!-- 用户列表区域  -->
        <el-table :data="userlist" stripe style="width: 100% " border>
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="180">
            </el-table-column>
            <el-table-column prop="nickname" label="昵称">
            </el-table-column>
            <el-table-column prop="role_id" label="角色">
            </el-table-column>
            <el-table-column label="操作" class="operation">
                <!-- 作用域插槽 -->
                <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" @click="showedit(scope.row)" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination :current-page="1"  @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[2, 3, 5, 10]" :page-size="datalist.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 修改用户对话框 -->

        <el-dialog title="修改用户" :visible.sync="dialogVisible" width="45%" >
        <el-form  :model='editdata' status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="pass" >
                <el-input v-model="editdata.username" disabled="disabled" ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="checkPass">
                <el-input v-model="editdata.email"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="age">
                <el-input v-model="editdata.nickname"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit()">确 定</el-button>
        </span>
        </el-dialog>

    </el-card>
</div>

</template>
<script>
import axios from 'axios';
export default {
    data(){
        return {
            datalist:{
            page:1,
            keyword:'',
            // 每页显示条目数
            pageSize:2,
            },
            userlist: [],
            // 总条数
            total:0,
            dialogVisible:false,
            editdata:{
                username:'',
                nickname:'',
                email:''
            }
        };    
    },
    
        methods:{
        getuser(){
            // var param={page:this.page,keyword:this.keyword};
            // 获取用户列表
            axios.get('http://adminapi.pyg.com/admin',{params: this.datalist}).then((res)=>{
            // console.log(res);
            if(res.data.code!==200||res.data.msg!=='success'){
                return this.$message.error('获取用户列表失败');
            }
            var {data}=res.data;
            // console.log(data);
            this.userlist=data.data;
            // 总条数
            this.total=data.total;
        });       
    },   
        // 监听pagesize改变事件
        handleSizeChange(newsize){
            this.datalist.pageSize=newsize;
            this.getuser();
        },
        // 监听当前页面改变事件
        handleCurrentChange(newPage){
            this.datalist.page=newPage;
            this.getuser();
        },
        // 修改用户
        showedit(row){
            // console.log(id);
            this.editdata=row;
            this.dialogVisible=true;
        },
        handleClose(done){
            this.$confirm('确认关闭?')
            .then(_=>{
                done();
            })
            .catch(_=>{});
        },
        // 保存用户修改信息并提交
        edit(){
            // 表单验证 邮箱 昵称
            // 发起修改信息的数据请求
            axios.post('http://adminapi.pyg.com/edit',this.editdata).then((res)=>{
                // console.log(res);
                if(res.data.code==200&&res.data.msg=='success'){
                     return this.$message({
                            message:'修改成功',
                            type:'success'
                });
                }
               this.$message.error('修改失败');
            })
            this.dialogVisible=false;
        }
},
mounted(){
    this.getuser();
},
};
</script>
<style scoped>

    .el-card{
        margin-top: 20px;
    }
    .btn{
        margin-left: 20px;
    }
    .el-table{
        margin-top:40px ;
        margin-bottom:30px ;
    }
 
</style>